<template>
  <div>
    <MBX
      level="商品管理"
      level2="参数列表"
    ></MBX>
    <el-card>
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        show-icon
      >
      </el-alert>
      <br>
      <!-- 选择商品分类 -->
      <el-row>
        <el-col
          :span="2"
          style="link-height:30px"
        >
          选择商品分类：{{value}}
        </el-col>
        <el-col :span="20">
          <el-cascader
            v-model="value"
            :options="fenlei"
            :props="{ expandTrigger: 'hover',children:'children',label:'cat_name',value:'cat_id' }"
            @change="handleChange"
          ></el-cascader>
        </el-col>
      </el-row>
      <!-- 选择商品分类 -->
      <!-- tab切换 -->
      <el-tabs
        v-model="activeName"
        @tab-click="qiehuan"
      >
        <el-tab-pane
          label="动态参数"
          name="many"
          :disabled="show"
        >
          <!-- 动态参数 -->
          <el-button
            type="primary"
            size="mini"
            :disabled="show"
            @click="dialogVisible=true"
          >添加参数</el-button>
          <!-- 表格 -->
          <el-table :data="canshu">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div>
                  <!-- 展开行内容 -->
                  <el-tag
                    :key="index"
                    v-for="(item,index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index,scope.row)"
                    style="margin:5px"
                  >
                    {{item}}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                    style="width:100px"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                  >+ New Tag</el-button>
                  <!-- 展开行内容 -->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="#"
              type="index"
            ></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    @click="huitiancanshu(scope.row)"
                  >编辑</el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="delcanshu(scope.row)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 动态参数 -->
        </el-tab-pane>
        <el-tab-pane
          label="静态参数"
          :disabled="show"
          name="only"
        >
          <!-- 静态参数 -->
          <el-button
            type="primary"
            size="mini"
            :disabled="show"
            @click="dialogVisible=true"
          >添加参数</el-button>
          <!-- 表格 -->
          <el-table :data="canshu">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div>
                  <!-- 展开行内容 -->
                  <el-tag
                    :key="index"
                    v-for="(item,index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index,scope.row)"
                    style="margin:5px"
                  >
                    {{item}}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                    style="width:100px"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                  >+ New Tag</el-button>
                  <!-- 展开行内容 -->
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="#"
              type="index"
            ></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    @click="huitiancanshu(scope.row)"
                  >编辑</el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    @click="delcanshu(scope.row)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 动态参数 -->
        </el-tab-pane>
      </el-tabs>
      <!-- tab切换 -->
    </el-card>
    <!-- 添加参数模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="addcanshu">
        <el-form-item label="动态参数">
          <el-input v-model="addcanshu.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="canshuadd"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加参数模态框 -->
    <!-- 编辑参数模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <el-form :model="editcanshu">
        <el-form-item label="动态参数">
          <el-input v-model="editcanshu.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editcanshuok"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑参数模态框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "many",
      fenlei: [],
      value: [],
      show: true,
      canshu: [],
      dialogVisible: false,
      dialogVisible1: false,
      addcanshu: {
        attr_name: ""
      },
      editcanshu: {
        attr_name: "",
        attr_id: 0,
        attr_vals: []
      }
    };
  },
  created() {
    this.fllb();
  },
  methods: {
    //   渲染商品分类
    async fllb() {
      let res = await this.$API.shangpinfenlei();
      console.log("res", res);
      this.fenlei = res;
    },
    // 判断是否选择第三级分类
    async handleChange() {
      // console.log(this.value);
      if (this.value.length < 3) {
        this.$message({
          message: "只允许为第三级分类设置相关参数！",
          type: "warning"
        });
        this.show = true;
        this.canshu = [];
        return false;
      }
      this.show = false;
      this.qiehuan()
    },
    // 点击tab栏切换时
    async qiehuan() {
      if (this.activeName == "many") {
        // 渲染参数
        let res = await this.$API.canshuliebiao(this.fenleiid);
        res.forEach(item => {
          item.attr_vals = item.attr_vals.split(",");
          item.inputVisible = false;
          item.inputValue = "";
        });
        console.log("动态参数列表", res);
        this.canshu = res;
      } else if (this.activeName == "only") {
        // 渲染参数
        let res = await this.$API.canshuliebiao(this.fenleiid, "only");
        res.forEach(item => {
          item.attr_vals = item.attr_vals.split(",");
          item.inputVisible = false;
          item.inputValue = "";
        });
        console.log("静态参数列表", res);
        this.canshu = res;
      }
    },
    // 点击按钮显示输入框
    showInput(row) {
      console.log(row);
      row.inputVisible = true;
      this.$nextTick(_ => {
        console.log(this.$refs.saveTagInput);
        this.$refs.saveTagInput.focus();
      });
    },
    // 添加标签参数
    async handleInputConfirm(row) {
      console.log(row);
      if (row.inputValue.trim().length === 0) return;
      row.attr_vals.push(row.inputValue);
      let res = await this.$API.bianjitijiaocanshu(this.fenleiid, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(",")
      });
      console.log("添加参数", res);
      row.inputVisible = false;
      row.inputValue = "";
    },
    // 删除标签属性
    async handleClose(index, row) {
      row.attr_vals.splice(index, 1);
      let res = await this.$API.bianjitijiaocanshu(this.fenleiid, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(",")
      });
      console.log("删除参数", res);
      row.inputVisible = false;
    },
    // 添加参数
    async canshuadd() {
      let res = await this.$API.tianjiajingtaidongtaicanshu(this.fenleiid, {
        attr_name: this.addcanshu.attr_name,
        attr_sel: this.activeName
      });
      console.log("添加参数", res);
      this.dialogVisible = false;
      this.addcanshu.attr_name=''
      this.handleChange()
    },
    // 删除参数
    async delcanshu(row) {
      console.log("删除参数", row);
      let res = await this.$API.shanchucanshu(this.fenleiid, row.attr_id);
      this.handleChange();
    },
    // 回填编辑参数
    huitiancanshu(row) {
      this.dialogVisible1 = true;
      this.editcanshu.attr_name = row.attr_name;
      this.editcanshu.attr_id = row.attr_id;
      this.editcanshu.attr_vals = row.attr_vals;
      console.log(row);
    },
    // 提交编辑
    async editcanshuok() {
      let res = await this.$API.bianjitijiaocanshu(
        this.fenleiid,
        this.editcanshu.attr_id,
        {
          attr_name: this.editcanshu.attr_name,
          attr_sel: this.activeName,
          attr_vals: this.editcanshu.attr_vals.join(",")
        }
      );
      console.log("编辑参数", res);
      this.handleChange();
      this.dialogVisible1 = false;
    }
  },
  computed: {
    fenleiid() {
      return this.value[this.value.length - 1];
    }
  }
};
</script>

<style>
.el-col-2 {
  margin-top: 10px;
}
</style>
